<!-- components/ImageModal.vue -->
<template>
	<view class="body">
		<view class="item">
			<view class="lable">
				手机号
			</view>
			<view class="pr">
				<input v-model="phone" class="input" placeholder="请输入手机号" placeholder-class="input_placeholder"
					@blur="nameBlur" @input="showRealName = false" maxlength="11" />
				<view @click="sendCode" :class="[lock ? 'g' : '' ,'pa']">
					{{msg}}
				</view>
				<view class="red" v-if="showRealName">
					请填写正确的手机号
				</view>
			</view>
		</view>
		<view class="item">
			<view class="lable">
				验证码
			</view>
			<view class="">
				<input v-model="code" class="input" placeholder="请输入验证码" placeholder-class="input_placeholder"
					@blur="IdBlur" @input="showIdCard = false" maxlength="6" />
				<view class="red" v-if="showIdCard">
					请填写6位验证码
				</view>
			</view>
		</view>
		<view class="save" @click="Save">
			提交
		</view>
	</view>
</template>

<script>
	import {
		sendCode,
		memberBindPhone,
	} from '@/api.js'
	export default {
		props: {
			obj: {
				type: Object,
				default: {}
			},
		},
		watch: {
			obj: {
				handler(newVal) {
					this.syncData(newVal)
				},
				deep: true,
				immediate: true,
			}
		},
		data() {
			return {
				phone: '',
				showRealName: false,
				idCard: '',
				showIdCard: false,
				msg: '获取验证码',
				lock: false,
			}
		},

		methods: {
			async sendCode() {
				let that = this
				if (this.lock) {
					return
				}
				if (this.nameBlur()) {
					let res = await sendCode(this.phone)
					console.log('res', res);
					if (res.code == 200) {
						that.lock = true
						that.msg = 60
						let a = setInterval(() => {
							if (that.msg <= 0) {
								clearInterval(a)
								that.msg = '重新获取验证码'
								that.lock = false

							} else {
								that.msg = that.msg - 1
							}
						}, 1000)
					}

				}

			},
			syncData(source) {
				this.phone = source.phone;
			},
			nameBlur() {
				if (!this.phone || this.phone == '') {
					this.showRealName = true
					return false
				} else {
					this.showRealName = false
					return true
				}
			},
			IdBlur() {
				if (!this.code || this.code == '') {
					this.showIdCard = true
					return false
				} else {
					this.showIdCard = false
					return true
				}
			},
			async Save() {
				if (this.nameBlur() && this.IdBlur()) {
					let res = await memberBindPhone({
						phone: this.phone,
						code: this.code
					})
					if (res.code == 200) {
						uni.showToast({
							icon: 'none',
							title: '绑定成功',
							duration: 2000,
							complete() {
								setTimeout(() => {
									uni.navigateBack()
								}, 2000)
							},
						});
					}
				}

			},
		}
	}
</script>

<style scoped lang="scss">
	.body {
		background: #f8f8f8;
		height: 100vh;
		width: 100vw;
		padding: 30rpx 0;
		box-sizing: border-box;

		.item {
			display: flex;
			// align-items: center;
			width: 710rpx;
			margin: 20rpx 20rpx;
			border-bottom: 1rpx solid #ccc;
			padding: 10rpx 0;

			.lable {
				width: 110rpx;
				font-size: 28rpx;
			}

			.input {
				width: 600rpx;
				padding-left: 20rpx;
				font-size: 28rpx;
			}

			.input_placeholder {
				font-size: 28rpx;

			}

			.red {
				font-size: 26rpx;
				color: red;
				padding-left: 20rpx;
			}
		}

		.save {
			font-size: 28rpx;
			letter-spacing: 10rpx;
			width: 710rpx;
			margin: 50rpx 20rpx;
			background: #3C9CFF;
			height: 60rpx;
			color: #fff;
			line-height: 60rpx;
			text-align: center;
		}
	}

	.pr {
		position: relative;
	}

	.pa {
		position: absolute;
		top: 0;
		right: 0;
		min-width: 130rpx;
		padding: 0 10rpx;
		text-align: center;
		height: 40rpx;
		line-height: 40rpx;
		border-radius: 4rpx;
		color: #fff;
		font-size: 24rpx;
		background-color: #5ac725;
	}

	.g {
		background-color: rgba(#5ac725, .5);
	}
</style>